import React from 'react';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import {useNavigate,useLocation,Outlet, Navigate}from 'react-router-dom'
import { Zi } from './router';


function App() {
  const {phomname}=useLocation()
  const navigate=useNavigate()
  const { Header, Content, Footer } = Layout;
  const handOk=(arr)=>{
     return arr.map((item)=>{
      return {
         key:item.path,
         label:item.title,
        
      }
     })
  }
  const items=handOk(Zi)

  // const items = Array.from({ length: 15 }).map((_, index) => ({
  //   key: index + 1,
  //   label: `nav ${index + 1}`,
  // }));
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <div>
      <Layout>
        <Header style={{ display: 'flex', alignItems: 'center' }}  >
          <div className="demo-logo" />
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['phomname']}
            items={items}
            style={{ flex: 1, minWidth: 0 }}
            onClick={({key})=>navigate(key)}
          />
        </Header>
        <Content style={{ padding: '0 48px' }}>
          <Breadcrumb
            style={{ margin: '16px 0' }}
            items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}
          />
          <div
            style={{
              background: colorBgContainer,
              minHeight: 280,
              padding: 24,
              borderRadius: borderRadiusLG,
            }}
          >
            <Navigate to={'/home'}></Navigate>
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>

    </div>
  )
}

export default App
